<template>
    <div>
        <div class="app-card">
            <div class="app-card-header">用户头像</div>
            <div class="app-card-body text-center">
                <img class="head-img"
                     :src="(store.userInfo && store.userInfo.headImg) ? store.userInfo.headImg : website.logo"
                     alt=""/>
                <a-divider/>
                <a-upload
                        name="file"
                        v-model:file-list="headImgList"
                        :data="uploadData"
                        :action="getHeadImgUrl"
                        :before-upload="beforeUpload"
                        :show-upload-list="false"
                        @change="handleChange"
                >
                    <a-button>
                        <upload-outlined/>
                        上传
                    </a-button>
                </a-upload>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import website from "/src/config/website";
    import {UploadOutlined,} from '@ant-design/icons-vue';

    import {headImgUrl} from '/src/request/api/user';

    export default {
        name: "HeadImg",
        // 组件
        components: {
            UploadOutlined,
        },
        // 数据
        data() {
            return {
                website: website,
                // vuex 状态
                store: useStore().state,
                // 头像数据
                headImgList: [],
                uploadData: {
                    token: useStore().state.token,
                },
            }
        },
        // DOM未渲染前调用
        created() {
        },
        // DOM渲染后调用
        mounted() {
        },
        // 方法
        methods: {
            // 头像url
            getHeadImgUrl() {
                return headImgUrl;
            },
            // 检测
            beforeUpload(file) {
                let that = this;
                const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
                if (!isJpgOrPng) {
                    that.$message.error('上传的图片必须是Jpg或者Png格式!');
                    return false;
                }
                const isSize = file.size / 1024 / 1024 < 1;
                if (!isSize) {
                    that.$message.error('图片大小不能超过1MB!');
                    return false;
                }
                return true;
            },
            // 变更
            handleChange(info) {
                console.log('handleChange', info);
                let that = this;

                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }

                if (info.file.status === 'done') {
                    that.$message.success(`${info.file.name} 上传完成`);
                    that.$store.dispatch("getInfo");
                } else if (info.file.status === 'error') {
                    that.$message.error(`${info.file.name} 上传失败`);
                }
            },
        }
    }
</script>

<style lang="less" scoped>
    .head-img {
        min-width: 100px;
        max-width: 200px;
        border-radius: 4px;
    }
</style>